<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    router="true"
  >
    <el-menu-item index="/workplace">工作台</el-menu-item>
    <el-menu-item index="2">标签管理</el-menu-item>
    <el-menu-item index="3">模型管理</el-menu-item>
    <el-menu-item index="/activity">活动管理</el-menu-item>
    <el-menu-item index="5">评估中心</el-menu-item>
    <el-menu-item index="/Labor">劳动竞赛</el-menu-item>
  </el-menu>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
const activeIndex = ref('/workplace')

// 监听路由变化，改变activeIndex的值
const route = useRoute()
// const currentPath = ref(route.path);
watch(
  () => route.path,
  newVal => {
    activeIndex.value = newVal
    console.log(newVal)
  },
  { immediate: true } // 设置immediate为true，会在初次挂载时也执行一次
)
</script>
<style lang="scss" scoped>
.el-menu--horizontal {
  justify-content: center;
}
</style>
